<!--
 * @Date: 2022-04-10 13:47:49
 * @LastEditors: sailornpg
 * @LastEditTime: 2022-04-10 18:27:51
 * @FilePath: \weibovue\src\components\emoji\index.vue
 * @Description: 表情组件
-->
<template>
  <!-- <span class="emojiItem sprite-raised_hand"></span> -->
  <el-popover
    placement="bottom"
    title="选择表情"
    :width="400"
    trigger="click"
    :show-arrow="false"
  >
    <template #reference>
      <slot name="default"></slot>
    </template>
    <div class="emojiBox">
      <span
        class="emojiItem"
        v-for="(item, index) in emojiData"
        :key="index"
        @click="selectItem(item)"
        >{{ item }}
      </span>
    </div>
  </el-popover>
</template>
<script lang="ts" setup>
import { computed } from "vue";
import emojis from "../emoji/emojis.json";
const emits = defineEmits(["getEmoji"]);
let emojiData = computed(() => {
  let arr = Object.keys(emojis).map((item, index) => {
    return (emojis as any)[item].char;
  });
  arr.length = 319;
  return arr;
});
//选择的表情
const selectItem = (emoji: string) => {
  emits("getEmoji", emoji);
};
</script>
<style lang="less" scoped>
.emojiBox {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  height: 200px;
  overflow-y: auto;
  justify-content: space-around;
  .emojiItem {
    width: 30px;
    height: 30px;
    border-radius: 25px;
    cursor: pointer;
    text-align: center;
    line-height: 30px;
    font-size: 16px;
    &:hover {
      background-color: #fff2e5;
    }
  }
}
</style>
